<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
  	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    
	<style type="text/css">
		* {
		  box-sizing: border-box;
		  padding: 0;
		  margin: 0;
		}
		
		body {
		  background: #22313f;
		}
		
		#starsBox {
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background: rgb(0, 0, 0);
		  opacity: .5;
		}
		#starsBox span {
		  display: inline-block;
		  width: auto;
		  position: absolute;
		  border-radius: 100%;
		  transition: 100s linear;
		}
		
		p {
		  transform: translateY(-50%);
		  font-size: 40px;
		  font-weight: 900;
		  color: white;
		  text-shadow: 0 0 50px black;
		  text-transform: uppercase;
		  font-family: 'Roboto','Helvetica','Arial',sans-serif;
		  letter-spacing: 5px;
		}
		p > span {
		  display: block;
		  font-size: 12px;
		  color: #bdc3c7;
		  font-weight: 100;
		  text-shadow: 0 0 50px black;
		  letter-spacing: 3px;
		  margin-top: 30px;
		}
		p > span > a {
		  font-weight: 700;
		  text-decoration: none;
		  color: #d64541;
		  padding-bottom: 2px;
		  border-bottom: 0px solid #d64541;
		  transition: 0.5s;
		}
		p > span > a:hover {
		  padding-bottom: 5px;
		  border-bottom: 2px solid #d64541;
		  
		}
		
		
		.index{
			position: fixed;
			top: 45%;
			left: 0;
			right: 0;
			text-align: center;
		}
		
		input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #fff; width: 400px; box-sizing: border-box; letter-spacing: 1px; background:none;}
		button {
			border:1px solid #fff;
		}
	</style>
  </head>
  
  <body style="padding-top: 0px">
  	<div id="starsBox">
  	
  	</div>

	
	<div class="index">
		<p>基于WEB的人脸识别考勤系统<span>Face Recognition Attendance System - by DMlinkong</span></p>
		
		<div class="input-group container-fluid" style="width: 400px;">
			<input type="text" class="form-control" placeholder="Enter the class..." id="classname" value="教技1511">
			<span class="input-group-btn">
				<button class="btn btn-primary" type="button" style="border:1px solid #ccc;" id="submit">START</button>
			</span>
		</div>
		<p><span>请使用360浏览器的急速模式浏览，测试班级：教技1511</span></p>
	</div>
	

    

    
    <script src="js/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
    	var cols = ['#f5d76e','#f7ca18','#f4d03f','#ececec','#ecf0f1','#a2ded0'];
		var stars = 250;
		
		for (var i = 0; i <= stars; i++) {
		
			var size = Math.random()*3;
			var color = cols[parseInt(Math.random()*4)];
		
			$('#starsBox').prepend('<span style=" width: ' + size + 'px; height: ' + size + 'px; top: ' + Math.random()*100 + '%; left: ' + Math.random()*100 + '%; background: ' + color + '; box-shadow: 0 0 '+ Math.random()*10 +'px' + color + ';"></span>') ;
		};
		
		setTimeout(function(){
			$('#starsBox span').each(function(){  
		 		$(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%'); 
		  });
		}, 1);
		
		setInterval(function(){
			$('#starsBox span').each(function(){  	
		 		$(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%'); 
		  });
		}, 100000);
    </script>
    <script type="text/javascript">
    var classname;
    layui.use('layer', function(){
    	
    	
   		$('#submit').on('click', function(){
   			classname = $('#classname').val();
   			$.ajax(
			{
				type:"post",
				url:"course/getCourseBySclass.action",
				dataType:"json",
				data:{
					classname: classname
				},success:function(result){
				switch(result.code){
					case 0:
						layer.msg(result.msg);
					  	break;
					case 1:
					case 2:
					case 3:
					case 4:
						layer.confirm('ERROR：' + result.msg + '<br>该班级无法进入检测界面，你可以进入控制台（需登录）或者尝试更换检测班级 ', {
					  		btn: ['进入控制台','关闭'] //按钮
						}, function(){
					  		window.location.href = "main.action"
						}, function(){
						});
					  	break;
					case 5:
						window.location.href = "detection.action"
						break;
					}
					
				}
			});
			
		});
		
		document.onkeydown =cdk;
		function cdk(){
			if(event.keyCode==13){
				$("#submit").trigger("click");
			}
		}
    });
    </script>
  </body>
</html>
